<template>
  <div class="box">
    <h3 style="color: #409EFF">新闻资讯</h3>
    <div class="wrap">
      <div class="left">
        <div class="swiper-container swiper-news">
          <div class="swiper-wrapper">
            <div v-for="item in picItems" :key="item.id" class="swiper-slide">
              <a target="_blank" href="javascript:void(0)" @click="getDeatil(item)">
                <img :src="version + '/uploadFile/path/' + item.titlePicUrl" alt="titlePicUrl">
              </a>
            </div>
          </div>
          <div class="swiper-pagination swiper-pagination-news" />
        </div>
      </div>
      <div class="right">
        <div class="news">
          <a v-for="item in items" :key="item.id" href="javascript:void(0)" target="_blank" @click="getDeatil(item)">
            {{ item.title }}
          </a>
        </div>
        <el-pagination :current-page="query.page" :page-size="query.size" :total="total" layout="prev, pager, next" @current-change="queryList" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Swiper from 'swiper'
import { VERSION } from '@/constants/uri'
import { HOME_ITEM } from '@/constants/storage'
export default {
  components: {
    Swiper
  },
  data() {
    return {
      items: [],
      picItems: [],
      version: VERSION,
      query: {
        page: 1,
        size: 5
      },
      total: 0
    }
  },
  mounted() {
    this.queryList()
  },
  methods: {
    queryList(page = 1) {
      this.query.page = page
      axios.get(`/getMessageRelease/2/${this.query.page}/${this.query.size}`).then(res => {
        if (res.success) {
          this.items = res.data
          this.total = res.total
          if (!this.picItems.length) {
            this.picItems = [...res.data]
            setTimeout(() => {
              new Swiper('.swiper-news', {
                slidesPerView: 1,
                spaceBetween: 0,
                autoplay: {
                  delay: 5000,
                  disableOnInteraction: false
                },
                loop: true,
                pagination: {
                  el: '.swiper-pagination-news',
                  clickable: true
                }
              })
            }, 0)
          }
        }
      })
    },
    getDeatil(item) {
      sessionStorage.setItem(HOME_ITEM, JSON.stringify(item))
      window.open(`/home/detail/${item.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .box {
    width: 1240px;
    margin: 10px auto;
    padding: 20px;
    box-shadow: 4px 4px 4px #eee;
  }
  .wrap {
    font-size: 0;
  }
  .left {
    display: inline-block;
    width: 400px;
    vertical-align: top;
    font-size: 14px;
    img {
      display: block;
      width: 100%;
    }
  }
  .right {
    display: inline-block;
    width: 700px;
    margin-left: 50px;
    vertical-align: top;
    text-indent: 10px;
    line-height: 42px;
    font-size: 14px;
    a {
      display: block;
      width: 100%;
      border-bottom: 1px solid #eee;
    }
  }
  .news {
    height: 240px;
  }
</style>
